<template>
  <el-row>
    <el-col :span="11">
      <el-breadcrumb separator="/" style="margin: 0 0 20px 0">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>留言</el-breadcrumb-item>
      </el-breadcrumb>

      <el-input placeholder="请输入名称" size="small" style="width: 40%" v-model.trim="sousuo"></el-input>
      <el-button type="primary" size="small" @click="sousuoid()">搜索</el-button>
    </el-col>
    <el-col :span="11">
      <h1>留言</h1>
    </el-col>

    <el-col :span="24" style="margin:  10px 0 3% 0">
      <el-table
        :data="hfData"
        style="width: 100%;">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="number"
          label="留言ID">
        </el-table-column>
        <el-table-column
          prop="question"
          label="留言内容">
        </el-table-column>
        <el-table-column
          prop="commodityId"
          label="留言对象"
          sortable>
        </el-table-column>
        <el-table-column
          prop="customerManagerId"
          label="留言专家"
          sortable>
        </el-table-column>
        <el-table-column
          prop="status"
          label="是否回复"
          sortable>
        </el-table-column>
        <el-table-column
          prop="isShow"
          label="审核状态"
          sortable>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="auditry(scope.row)" v-if="scope.row.isShow==='未审核'">未审核</el-button>
            <el-button type="text" size="small" v-if="scope.row.isShow==='已审核'">已审核</el-button>
            <el-button type="text" size="small" @click="replyid(scope.row)">回复</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5,10]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <el-dialog title="查看用户" :visible.sync="dialogFormUp">
        <el-form :model="formUp" style="width: 80%">
          <el-form-item label="留言内容 :" label-width="20%">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 10}"
              v-model="formUp.question">
            </el-input>
          </el-form-item>
          <el-form-item label="内容回复 :" label-width="20%">
            <el-input
              type="textarea"
              :autosize="{ minRows: 5, maxRows: 10}"
              v-model="formUp.answer">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormUp = false">取 消</el-button>
          <el-button type="primary" @click="answerry()">回 复</el-button>
        </div>
      </el-dialog>

    </el-col>
  </el-row>
</template>

<script>
  import {getryList, delreply, answer, auditreply, getryid,ryqueryid} from "@/api/replyApi";
  import {getMatterid} from "@/api/matterApi";
  import {getexpertid} from "@/api/expertApi";

  export default {
    data() {
      return {
        dialogFormUp: false,
        currentPage4: 1,
        page: 1,
        size: 5,
        total: 10,
        sousuo:'',
        formUp: {
        },
        formAdd: {
          name: '',
        },
        hfData: [],
        reData: [],
      }
    },
    methods: {
      getreply() {
        let data = {
          page: this.page,
          size: this.size
        };
        this.hfData=[];
        getryList(data).then((res) => {
          this.total = res.data.data.totalElements;
          res.data.data.content.forEach((value) => {
            if(value.status===0){
              value.status='未回复';
            }else if(value.status===1){
              value.status='已回复';
            }
            if(value.isShow===0){
              value.isShow='未审核';
            }else if(value.isShow===1){
              value.isShow='已审核';
            }

            if(value.commodityId!=null){
              let data = {commodityid: value.commodityId};
              getMatterid(data).then((ress) => {
                value.commodityId = ress.data.data.description;
              });
            }
            if(value.customerManagerId!=null){
              let id = {customermanagerid: value.customerManagerId};
              getexpertid(id).then((resss) => {
                value.customerManagerId = resss.data.data.name;
              })
            }

          });
          if(this.sousuo!==''){
            let data={number:this.sousuo};
            ryqueryid(data).then((res)=>{
              if(res.data.data!=null){
                let a=res.data.data;
                this.hfData.push(a);
              }
            })
          }else{
            this.hfData =res.data.data.content;
          }
        })

      },

      replyid(row) {
        let data = {
          replyid: row.id
        };
        getryid(data).then((res) => {
          this.formUp = res.data.data;
          this.dialogFormUp = true;
        })
      },
      auditry(row) {
        let data = {
          replyid: row.id
        };
        auditreply(data).then((res) => {
          this.$confirm('确认审核通过吗?', '提示', {
            type: 'warning'
          }).then(() => {
            this.getreply();
            this.$message({
              message: '审核成功!',
              type: 'success'
            });
          }).catch(() => {
          });
        })
      },
      answerry(){
        let data={
          replyid:this.formUp.id,
          answer:this.formUp.answer,
        };
        answer(data).then((res)=>{
          this.dialogFormUp = false;
          this.getreply();
          this.$message({
            message: '回复成功!',
            type: 'success'
          });
        })
      },
      sousuoid(){
        this.getreply();
      },

      handleSizeChange(val) {
        this.size = val;
        this.getreply()
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getreply()
      },

    },
    mounted() {
      this.getreply();
    }
  }
</script>

<style>


</style>
